<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>ECharts-青岛地图</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="js/province/shandong.js"></script>
    <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>

<div id="china-map"></div>

<script type="text/javascript">
    $.get('js/city/370200.json', function (qDjson) {
        echarts.registerMap('青岛', qDjson);
        var chart = echarts.init(document.getElementById('china-map'));



        //覆盖物
        var geoCoordMap = {//自定义城市坐标
            "线索1":[120.371806,36.119665],
            "线索2":[120.362033,36.115117],
            "线索3":[120.377735,36.107449],
            "线索4":[120.408421,36.102958],
            "线索5":[120.399222,36.105961]
        };
        var data = [
             {name: '线索1', value: 9},
             {name: '线索2', value: 12},
             {name: '线索3', value: 12},
             {name: '线索4', value: 12},
             {name: '线索5', value: 14}
         ];
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        console.log('convertData:',convertData(data));

        option = {
            tooltip: {
                trigger: 'item'
            },
            title: {
                text: '线索分布',
                x:'center'
            },
            dataRange:{
                min:0,
                max:500,
                text:['高','低'],
                realtime:true,
                calculable:true,
                color:['orangered','yellow','green']
            },
            series:[
                {
                    name:'数量',
                    type:'map',
                    map:'青岛',
                    mapLocation:{
                        y:60
                    },
                    itemSytle:{
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            areaColor: '#32fdff'
                        }
                    },
                    data:[
                        {name:'城阳区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'崂山区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'市北区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'市南区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'李沧区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'黄岛区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'即墨区',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'平度市',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'莱西市',value:Math.round(Math.random()*500),label: {normal: {show: true}}},
                        {name:'胶州市',value:Math.round(Math.random()*500),label: {normal: {show: true}}}
                    ]
                },
                {
                    name: '11',
                    type:'map',
                    map:'青岛',
                    mapLocation:{
                        y:60
                    },
                    itemSytle:{
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff'
                            },
                            areaColor: '#32fdff'
                        }
                    },
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'purple',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ],
        };
        chart.setOption(option);
        //轮播展示
        var currentIndex = -1;
        setInterval(function() {
            var dataLen = option.series[0].data.length;
            // 取消之前高亮的图形
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0, //表示series中的第几个data数据循环展示
                dataIndex: currentIndex
            });
            currentIndex = (currentIndex + 1) % dataLen; //+1表示每次跳转一个
            // 高亮当前图形
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
            // 显示 tooltip
            chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: currentIndex
            });
        }, 3000);
        //鼠标点击事件
        chart.on('click', function(params) {
            var cityName = params.name;
            var cityValue = params.value;
            alert(cityName + "***" + cityValue);
        });
    });
</script>


</body>
</html>